<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>一键报警系统</title>

<style type="text/css">
	*{
		margin:0px;
		padding:0px;
	}
	html,body{
		width:100%;
		height:100%;
	}
	body, button, input, select, textarea {
		font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
		font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti;

	}
	.btn {
		display: inline-block;
		margin-bottom: 0;
		font-size: 1em;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 6px;
		
	}
	.btn-a-larum{
		padding: 2.5% 0 3% 0;
		color: #fff;
		background-color: #ec5050;
		border-color: #ec5050;
		width: 60%;
		margin-top: 10%;
		font-size: 2.5em;
		
	}
	.disabled{
		 background-color: #808080;
		border-color: #808080;
		pointer-events: none;
	}
	#container{
		width:100%;
		height:80%;
	}
	.a-larum-content{
		text-align:center;
	}
	.a-layer{
		position: fixed;
		z-index: 9999;
		top: 0;
		background: rgba(0, 0, 0, 0.4);
		width: 100%; 
		height: 100%;
		display:none;
	}
	.a-box{
		background-color:#fff;
		width: 100%;
		height: 100%;
	}
	.a-box-title{
		border-bottom: 1px solid rgb(221, 221, 221);
		background: rgb(245, 245, 245);
		color: #333;
		font-weight: bold;
		padding: 4% 4% 4% 4%;
		font-size:1.5em;
	}
	.a-box-body{
		padding: 3% 3% 3% 6%;
		height: 86%;
		text-align: center;
		font-size: 2em;
		line-height: 200%;
	}
	.a-box-close{
		opacity: 0.2;
		float: right;
		font-size: 1.6em;
		font-weight: bold;
		line-height: 18px;
		color: #000000;
		text-shadow: 0 1px 0 #ffffff;
		cursor: pointer;
	}
	.a-box textarea{
		resize: none;
		height: 30%;
		width: 95%;
		    font-size: 1em;
		line-height: 100%;
	}
	#btnComplaint{
		height: 10%;
		margin-top: 1%;
		width: 60%;
		background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
		background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
		border: 1px solid #ccc;
		border-bottom-color: #bbb;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-appearance: none;
		font-size: 1em;
	}
	.a-box #mobile{
		width: 95%;
		margin-bottom: 2%;
		height: 17%;
		font-size: 1.6em;
	}
	#map-loading{
		font-size:3em;
		position: fixed;
		top:30%;
		left:20%;
	}
</style>
</head>
<body>
<p id='map-loading'>地图加载中......</p>
<div id="container"></div>
<div class='a-larum-content'>
<a id='larum' class='btn btn-a-larum disabled'  >立即报警</a>
</div>
<div id='a-layer-larum' class='a-layer'>
	<div class='a-box'>
		<div class='a-box-title'>填写信息<a class="a-box-close" id="a-box-close">×</a></div>
		<div class='a-box-body'>
			 <b>联系方式</b>
			 <input type="text" id='mobile' /> 
			 <b>备注</b>
			 <textarea id='textRemark' placeholder='请在这里填写遇到的问题或事件（100字以内)'></textarea>
			
			 <button id='btnComplaint' type="button">发送报警信息</button>
		</div>
	</div>
</div>

</body>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script type="text/javascript">
	var latitude,
		longitude,
		callId,
		time,
		_token 		= '{{ csrf_token() }}';

	/**
	 * 初始化腾讯地图
	 * @param  {[type]} la 精度
	 * @param  {[type]} lo 纬度
	 * 
	 */
	function init(la,lo) {
		//div容器
		var container = document.getElementById("container");
		
		//alert(container.offsetWidth);
		//alert(container.offsetHeight);
		//初始化地图
		var map = new qq.maps.Map(container, {
			// 地图的中心地理坐标
			center: new qq.maps.LatLng(la, lo),
			zoom: 15
		});
		
	  //创建自定义控件
	  var middleControl = document.createElement("div");
	  middleControl.style.left=container.offsetWidth/2-16+'px';
	  middleControl.style.top=container.offsetHeight/2-32+'px';
	  middleControl.style.position="relative";
	  middleControl.style.width="32px";
	  middleControl.style.height="32px";
	  middleControl.style.zIndex="100000";
	  middleControl.innerHTML ='<img style="width:100%" src="https://www.cdlhome.com.sg/mobile_assets/images/icon-location.png" />';
	  container.appendChild(middleControl);
		//当地图中心属性更改时触发事件
		qq.maps.event.addListener(map, 'center_changed', function() {
			var Center= map.getCenter();
			latitude=Center.getLat();
			longitude=Center.getLng();
		});
	}
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="/js/validate-ex.js"></script>
<script>
	// alert($(document).height());
	$('html').height($(document).height());
	$('#a-layer-larum').height($(document).height());
	$('#mobile').val('18056013469');
	//通过config注入权限
	
	init(39.98174, 116.30631);	//初始化地图
	var larum = $('#larum');	//立即报警按钮
	larum.removeClass('disabled');

	larum.on('click',function(){
		$('#a-layer-larum').show();
		var is_lock=false;
		$('#btnComplaint').on('click',function(){
			if(is_lock) return false;
			var mobile=$('#mobile').val();
			if(isTel(mobile)){
			var remark=$('#textRemark').val();
			if(remark.length>100){
				alert('您的描述字数大于100，请重试！');
			return false;
			}
			is_lock=true;
			$('#btnComplaint').css("color","#808080");
			//提交报警经纬度
			$.ajax({ 
				type: "post", 
				url: "/call", 
				dataType: "json", 
				data:{_token:token, latitude:latitude,longitude:longitude,area_id:'330483',mobile:mobile,remark:remark},
				success: function (result) { 
					//判断是否提交成功
					if(result.code=='1'&&result.callId){
						larum.addClass('disabled');
						larum.unbind('click');
						alert('您的报警信息已经发送成功！')
						$('#a-layer-larum').hide();
						callId=result.callId;
						myhandle(callId);
					}else{
						alert('提交失败，请重试!');
						is_lock=false;
					}
				}, 
				error: function (XMLHttpRequest, textStatus, errorThrown) { 
					alert(errorThrown); 
					is_lock=false;
					$('#btnComplaint').css("color","");
				} 
			});
		}
	});	
});

$(function(){
	$('#a-box-close').on('click',function(){
		$('#a-layer-larum').hide();
	});

});
</script>

</html>